<template>
  <div class="bg-form">
    <el-form
      :model="addForm"
      label-width="130px"
      :show-message="false"
      :rules="addFormRules"
      ref="addForm"
    >
      <el-row>
        <el-col>其他入库基础信息 </el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="入库门店:" prop="storeId">
            <job-shop
              v-model="addForm.storeId"
              class="w-100"
              @input="getWareHouse"
              placeholder="入库门店"
            />
            <!-- <el-select
              class="w-100"
              clearable
              @change="getWareHouse"
              v-model="addForm.storeId"
              placeholder="入库门店"
            >
              <el-option
                v-for="item in stores"
                :key="item.id"
                :value="item.id"
                :label="item.storeName"
              />
            </el-select> -->
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="车架号:" prop="vin">
            <el-input
              v-model="addForm.vin"
              placeholder="车架号"
              clearable
              maxlength="17"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发动机号:" prop="engineModel">
            <el-input
              placeholder="发动机号"
              v-model="addForm.engineModel"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="采购单价:" prop="realityPrice">
            <el-input-number
              class="w-100"
              placeholder="采购单价"
              v-model="addForm.realityPrice"
              clearable
              controls-position="right"
              :controls="false"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="品牌:" prop="carBrandId">
            <el-select
              class="w-100"
              clearable
              filterable
              v-model="addForm.carBrandId"
              @change="change($event, 'carBrandId','c')"
              placeholder="请选择"
            >
              <el-option
                v-for="item in allCarList.brandsList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车系:" prop="seriesId">
            <el-select
              class="w-100"
              clearable
              filterable
              @change="change($event, 'seriesId','c')"
              v-model="addForm.seriesId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in allCarList.seriesList"
                :key="item.id"
                :value="item.id"
                @change="change"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年份:" prop="timeType">
            <el-select
              class="w-100"
              clearable
              @change="change($event, 'timeType','c')"
              v-model="addForm.timeType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in allCarList.timeTypeList"
                :key="item"
                :value="item"
                :label="item"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="车型:" prop="modelId">
            <el-select
              class="w-100"
              clearable
              filterable
              v-model="addForm.modelId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in allCarList.modelList"
                :key="+item.id"
                :value="+item.id"
                :label="item.modelName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="前装及价格明细:" prop="qzDetail">
            <el-input-number
              v-model="addForm.qzDetail"
              :controls="false"
              placeholder="前装及价格明细"
              clearable
              controls-position="right"
              class="w-100"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车身颜色:" prop="outColor">
            <el-input
              v-model="addForm.outColor"
              placeholder="车身颜色"
              clearable
              controls-position="right"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="内饰颜色:" prop="inColor">
            <el-input
              v-model="addForm.inColor"
              placeholder="内饰颜色"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车顶颜色:" prop="roofColor">
            <el-input
              v-model="addForm.roofColor"
              placeholder="车顶颜色"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="增配件及价格明细:" prop="addPartsDetail">
            <el-input-number
              v-model="addForm.addPartsDetail"
              placeholder="增配件及价格明细"
              clearable
              :controls="false"
              controls-position="right"
              class="w-100"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="供应商:" prop="supplierId">
            <el-select
              clearable
              v-model="addForm.supplierId"
              placeholder="请选择供应商"
              class="w-100"
            >
              <el-option
                v-for="item in supplierOptions"
                :key="item.id"
                :value="item.id"
                :label="item.supplierName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label='注释' prop='remark'>
            <el-input clearable v-model='addForm.remark'
                      type='textarea'
                      :autosize='{ minRows: 2, maxRows: 4}'
                      placeholder='请输入'></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>入库信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="仓 库:" prop="storageId">
            <el-select
              class="w-100"
              clearable
              v-model="addForm.storageId"
              placeholder="请选择"
              @change="getStorageSite"
            >
              <el-option
                v-for="item in storageList"
                :key="item.id"
                :value="item.id"
                :label="item.storageName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="仓 位:" prop="storageSiteId">
            <el-select
              class="w-100"
              filterable
              clearable
              v-model="addForm.storageSiteId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in storageSitList"
                :key="item.id"
                :value="item.id"
                :label="item.storageSiteName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="排放标准:" prop="emissionStandards">
            <el-select
              class="w-100"
              clearable
              v-model="addForm.emissionStandards"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dict['排放标准']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="其他入库缘由:" prop="rkDesc">
            <el-input
              placeholder="请输入其他入库缘由"
              type="textarea"
              v-model="addForm.rkDesc"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button
            type="primary"
            v-permission="'qtrk:save'"
            @click="onSubmit('addForm')"
            >保存</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getDict } from '@/utils/index'
import { mapGetters } from 'vuex'
import { CarModel } from '@/components/index' // 导入组件库
import baseMixin from '@/mixins/base'

import {
  addData,
  findByInfoId,
  updateData
} from '@/api/pre-sale/newCarStock/putInStorageManagement/otherInventory'
import { findByStore } from '@/api/after-sale/storehouseManage/warehouseManage'
import { storageSite } from '@/api/pre-sale/boutiqueStock/inventoryCheck'
import { getSupplierByStorId } from '@/api/after-sale/systemManage/supplier'
export default {
  components: { CarModel },
  props: ['id'],
  mixins: [baseMixin({})],
  data() {
    return {
      addForm: {
        storeId: '',
        supplierId: '',
        supplierName: '',
        storageId: '',
        storageSiteId: '',
        emissionStandards: '',
        // modelList:[],
        carBrandId: '',
        seriesId: '',
        timeType: '',
        remark: '',
        modelId: ''
      },
      form: {},
      addFormRules: {
        storeId: [{ required: true, message: '请选择', trigger: 'change' }],
        vin: [
          { required: true, message: '请输入', max: 17, trigger: 'change' }
        ],
        engineModel: [{ required: true, message: '请输入', trigger: 'change' }],
        // modelList: [{ required: true, message: '请选择', trigger: 'change' }],
        storageId: [{ required: true, message: '请选择', trigger: 'change' }],
        storageSiteId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        carBrandId: [{ required: true, message: '请选择', trigger: 'change' }],
        seriesId: [{ required: true, message: '请选择', trigger: 'change' }],
        timeType: [{ required: true, message: '请选择', trigger: 'change' }],
        modelId: [{ required: true, message: '请选择', trigger: 'change' }],
        emissionStandards: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      storageList: [],
      storageSitList: [],
      supplierOptions: [],
      dict: {}
    }
  },
  created() {
    this.$store.dispatch('others/setAllBrand')
  },
  mounted() {
    this.dict = getDict(['排放标准'])

    if (this.id) {
      this.getDetail()
    }
    this.addForm.storeId = this.userInfo.storeId
  },
  computed: {
    ...mapGetters(['stores', 'userInfo', 'allCarList'])
  },
  methods: {
    // 获取仓库
    async getWareHouse(id) {
      this.storeId = id
      const { data } = await findByStore(id)
      this.storageList = data
      // 获取供应商
      getSupplierByStorId(this.storeId, '整车供应商').then((res) => {
        this.supplierOptions = res.data || []
      })
    },
    // 获取仓位
    async getStorageSite(value,bool) {
      if (value) {
        const param = {
          storageId: value,
          storeId: this.addForm.storeId
        }
        const { data } = await storageSite(param)
        this.storageSitList = data.content || []
      } else {
        this.storageSitList = []
      }
      if(!bool) this.addForm.storageSiteId = '';
    },
    // 保存
    onSubmit(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          const obj = this.allCarList.brandsList.find(
            (item) => item.id === this.addForm.carBrandId
          )
          const params = {
            ...this.addForm,
            carBrandName: obj.name
          }
          let result = {}
          if (this.id) {
            result = await updateData({
              ...params,
              id: this.id
            })
          } else {
            result = await addData(params)
          }
          if (result.success) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$router.push({
              name: 'otherInventory'
            })
          } else {
            this.$message.error(message)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async getDetail() {
      await findByInfoId(this.id).then((res) => {
        const { success, data } = res
        if (success) {
          this.getWareHouse(data.storeId)
          this.$nextTick(() => {
            // this.addForm.modelList = [
            // data.carBrandId,
            // data.seriesId,
            // data.timeType,
            // +data.modelId,
            // ]
            console.log('error submit!!', data)
            this.change(data.carBrandId, 'carBrandId')
            this.change(data.seriesId, 'seriesId')
            this.change(data.timeType, 'timeType')
          })
          this.getStorageSite(data.storageId,true)
          this.addForm = { ...this.addForm, ...data }
        }
      })
    },
    change(id, type, c) {
      switch (type) {
        case 'carBrandId':
          this.$store.dispatch('others/setCleanCar', {
            seriesList: [],
            timeTypeList: [],
            modelList: []
          })
          this.$store.dispatch('others/setSeries', id)
          if (!c) return
          this.addForm = {
            ...this.addForm,
            carBrandId: id,
            seriesId: '',
            timeType: '',
            modelId: ''
          }
          break
        case 'seriesId':
          this.$store.dispatch('others/setCleanCar', {
            timeTypeList: [],
            modelList: []
          })
          this.$store.dispatch('others/setModelTimeType', {
            brandId: this.addForm.carBrandId,
            seriesId: id
          })
          if (!c) return
          this.addForm = {
            ...this.addForm,
            seriesId: id,
            timeType: '',
            modelId: ''
          }
          break
        case 'timeType':
          this.$store.dispatch('others/setCleanCar', {
            modelList: []
          })
          this.$store.dispatch('others/setModelRank', {
            brandId: this.addForm.carBrandId,
            seriesId: this.addForm.seriesId,
            timeType: id
          })
          if (!c) return
          this.addForm = {
            ...this.addForm,
            timeType: id,
            modelId: ''
          }
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.bg-form {
  background: #ffffff;
  padding: 20px;
}
</style>

